<template>
  <div class="confirmOrderPage">
    <div class="headerBox">
      <van-nav-bar title="认购订单" left-arrow @click-left="goBack" />
    </div>
    <div class="subGoods">
      <div class="subGoodsL">
        <img src="@/assets/img/goods/goods2.png" alt />
      </div>
      <div class="subGoodsR">
        <div class="box_top">
          <p class="txt6">{{goodsDetail.goodsName}}</p>
          <p class="money">
            <span class="txt4">￥</span>
            <span class="txt5">{{goodsDetail.goodsSellingPrice}}/份</span>
          </p>
        </div>
        <div class="box_btm">
          <p class="txt3">认购份额：{{goodsDetail.orderQuantity}}</p>
          <p class="txt9">认购总额：{{goodsDetail.orderQuantity * goodsDetail.goodsSellingPrice}}</p>
        </div>
        
        
        
      </div>
    </div>
    <div class="orderInfo">
      <div class="stepper">
        <span>户名：</span>
        <span class="txt7">成都星际港湾科技有限公司</span>
      </div>
      <div class="stepper">
        <span>银行：</span>
        <span class="txt7">农业银行成都金融城支行</span>
      </div>
      <div class="stepper">
        <span>对公账户：</span>
        <span class="txt7">2280 8301 0400 12144</span>
        <span class="txt10" id="copyTxt" @click="copyUrl" data-clipboard-text="22808301040012144">复制</span>
      </div>
      <!-- <div class="stepper">
        <span>订金</span>
        <span class="txt7">￥{{earnest}}</span>
      </div> -->
      <!-- <input type="type" v-model="des" class="desInput" placeholder="请输入备注信息…"> -->
      <!-- <p class="tip">*注：您认购的这份订单在下单后的45天后开始计算收益</p> -->
      <div class="handlerBox">
        <!-- <div class="checkedBox" @click="checked=!checked">
          <i :class="checked?'checked-active':'nochecked'"></i>
          提示：矿场份额认购全部完成，该定金将退还给持有该矿场的合伙人企业。
        </div> -->
        <div class="flex" style="padding:0 0.28rem">
          <p>实付款：<span class="txt8">￥{{goodsDetail.goodsSellingPrice*goodsDetail.orderQuantity}}</span></p>
          <p class="handlerBtn" @click="goOtherPay">确定</p>
        </div>
      </div>
    </div>
    <pay-style ref="payStyle"></pay-style>
  </div>
</template>


<script>
import payStyle from "../../components/payStyle/index";
import Clipboard from 'clipboard'
export default {
  data() {
    return {
      goodsDetail:{},
      des:'',
      orderId:'',
      // earnest:'',
    };
  },
  components: { 'pay-style':payStyle },
  created() {
    this.goodsDetail=JSON.parse(decodeURIComponent(this.$route.query.info))
    // this.earnest = this.$selfFunc.toNonExponential(this.goodsDetail.earnestMoneyPercentage*this.goodsDetail.orderQuantity,2)
  },
  methods: {
    // 复制
    copyUrl () {
      let self = this
      var clipboard = new Clipboard('#copyTxt')
      clipboard.on('success', e => {
        self.$toast('复制成功')
      })
    },
    // 线上支付
    goBuy() {
      this.$refs.payStyle.popupShow = true;
      let info = {
        goodsId:this.goodsDetail.goodsId,
        orderRemark:this.des,
        orderQuantity:this.goodsDetail.orderQuantity,
        earnestMoneyPercentage:this.goodsDetail.earnestMoneyPercentage,
        goodsSellingPrice:this.goodsDetail.goodsSellingPrice
      }
      this.$refs.payStyle.payInfoFunc(info)
    },
    // 线下支付
    async goOtherPay(){
      let data = {
        goodsId: this.goodsDetail.goodsId,
        orderQuantity:this.goodsDetail.orderQuantity
      }
      let res = await this.$http.getUserInfo()
      if (res) {
        console.log(res)
        if (res.data.inside_user_real_name) {
          let res = await this.$http.taxationFormOrder({...data});
          if (res) {
            console.log(res)
            this.$router.push({name:'myOrderDetail',query:{orderId:res.data.orderId}})
          }
        } else {
          this.$toast('请先实名认证在购买')
          setTimeout(()=>{
            this.$router.push({name:'myAuthentication'})
          },800)
          return
        }
      }
      
      // let info = {
      //   goodsId:this.goodsDetail.goodsId,
      //   orderQuantity:this.goodsDetail.orderQuantity,
      //   orderTotalPrice:this.goodsDetail.goodsSellingPrice*this.goodsDetail.orderQuantity
      // }
      // this.$router.push({name:'otherPay',query:{info:encodeURIComponent(JSON.stringify(info))}})
    },
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>
<style scoped>
.confirmOrderPage {
  background: #fff;
  min-height: 100vh;
}
.handlerBox {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  padding-bottom: 0.2rem;
  padding-top: 0.2rem;
  border-top: 2px solid #f1f1f1;
}
.handlerBtn {
  width: 3.26rem;
  height: 0.82rem;
  line-height: 0.82rem;
  border-radius: 0.41rem;
  text-align: center;
  color: #fff;
  font-size: 0.34rem;
  background: #f6741f;
}
.subGoods {
  display: flex;
  padding: 0.2rem 0.28rem;
  border-bottom: 1px solid #ececec;
}
.subGoodsL img {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.08rem;
  margin-right: 0.16rem;
}
.box_top{
  width: 4.4rem;
  height: 1.21rem;
  box-sizing: border-box;
  padding-bottom: .16rem;
  border-bottom: .02rem dashed #ECECEC;
}
.box_btm{
  width: 4.4rem;
  height: 1.18rem;
}
.money {
  font-weight: 400;
  /* margin-bottom: 0.1rem; */
  line-height: 0.44rem;
}
.txt3 {
  font-size: 0.29rem;
  color: #666;
  padding-top: .18rem;
  margin-bottom: 0.04rem;
  line-height: .4rem;
}
.txt4 {
  font-size: 0.24rem;
}
.txt5 {
  font-size: 0.29rem;
}
.txt6 {
  font-size: 0.32rem;
  margin-bottom: 0.08rem;
  margin-top: 0.12rem;
}
.txt7 {
  font-weight: 600;
}
.txt8{
  font-size: 0.34rem;
  color: #F30F0F;
  font-weight: 600;
}
.txt9{
  font-size: 0.32rem;
  color: #F30F0F;
  font-weight: 600;
  line-height: .44rem;
}
.txt10{
  font-size: 0.24rem;
  color: #00C8E7;
  position: absolute;
  right: .29rem;
}
.txt2{
  font-size: 0.4rem;
  font-weight: 600;
  margin-top: 0.12rem;
}
.stepper {
  display: flex;
  align-items: center;
  line-height: 1rem;
  border-bottom: 1px solid #F6F6F6;
  padding: 0rem 0.28rem;
  color: #333;
  font-size: .29rem;
  font-weight: 400;
  position: relative;
}
.orderInfo{
  /* margin: 0rem 0.28rem; */
}
.desInput{
  width: 6.94rem;
  height:0.92rem;
  line-height:0.92rem;
  background:#F5F5F5;
  border-radius:0.08rem;
  border: none;
  outline: none;
  padding-left: 0.28rem;
  margin: 0.28rem 0.28rem 0;
}
.tip{
  line-height:0.38rem;
  color: #C0C0C0;
  padding: 0 0.28rem;
  font-size: 0.24rem;
  margin-top: 0.4rem;
}
.payGoodsContent{
  padding: 0.4rem;
}
.handlerBtn2{
  width: 100%;
  height: 0.94rem;
  line-height: 0.94rem;
}
.payIcon{
  width: 0.4rem;
  height: 0.4rem;
  margin-right: 0.08rem;
  vertical-align: middle;
}
.checkedBox{
  display: flex;
  background: #F30F0F;
  color: #fff;
  padding: 0.24rem 0.28rem;
  font-size: 0.24rem;
  margin-bottom: 0.2rem;
      align-content: baseline;
}
.checkedBox i{
  position: relative;
  top: 0.02rem;
  display: inline-block;
  width: 0.36rem;
  height: 0.36rem;
  vertical-align: middle;
  background: url('../../assets/img/goods/icon_xuana2@2x.png') no-repeat;
  background-size: contain;
  margin-right: 0.1rem;
}
.checkedBox i.checked-active{
  background: url('../../assets/img/goods/icon_xuana1@2x.png') no-repeat;
  background-size: contain;
}
</style>
